<!DOCTYPE html>
<html>
	<!-- 我是王栋 -->
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#warp {
				display: flex;
				height: 100%;
			}

			#nav {
				width: 20%;
				background-color: #008B8B;
				padding-top: 100px;
				box-sizing: border-box;
			}

			#nav li {
				height: 100px;
				font-size: 30px;
				background-color: aqua;
				text-align: center;
				line-height: 100px;
				border-bottom: 2px solid white;
				cursor: pointer;
			}

			#nav .active {
				background-color: orange;
				color: #FFFFFF;
			}

			#content {
				width: 80%;
				background-color: #87CEEB;
				padding-top: 20px;
				box-sizing: border-box;
			}

			#content>div {
				display: none;
			}

			table {
				width: 500px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="warp">
			<ul id="nav">
				<li class="active">首页</li>
				<li>添加用户</li>
				<li>用户列表</li>
				<li>用户查询</li>
			</ul>
			<div id="content">
				<div style="display: block;">首页</div>
				<div>
					用户名:<input type="text" id="addtext" />
					<button type="button" id="add">添加用户</button>
				</div>
				<div>
					<input type="text" id="serchtext" />
					<button type="button" id="serch">搜索</button>
					<table border="1">
						<thead>
							<tr>
								<th>用户id</th>
								<th>用户名</th>
								<th>操作</th>
								<th>移动</th>
							</tr>
						</thead>
						<tbody id="tbody">
							<!-- <tr>
								<td>1234</td>
								<td>1234</td>
								<td>
									<button type="button">删除</button>
								</td>
								<td><button type="button">上移</button>
									<button type="button">下移</button>
								</td>
							</tr> -->
						</tbody>
					</table>
				</div>
				<div></div>
			</div>
		</div>
		<script type="text/javascript">
			var lis = document.querySelectorAll('#nav li')
			var divs = document.querySelectorAll('#content>div')
			for (var i = 0; i < lis.length; i++) {
				lis[i].index = i;
				lis[i].onclick = function() {
					for (var j = 0; j < lis.length; j++) {
						lis[j].className = ''
						divs[j].style.display = 'none'
					}
					this.className = 'active'
					divs[this.index].style.display = 'block'
				}
			}
			if (!localStorage.kaoshiList) {
				localStorage.kaoshiList = JSON.stringify([])
			}
			var add = document.querySelector('#add')
			add.onclick = function() {
				var addtext = document.querySelector('#addtext')
				if (addtext.value) {
					var obj = {
						id: new Date().getTime(),
						username: addtext.value
					}
					var arr = JSON.parse(localStorage.kaoshiList)
					arr.push(obj)
					localStorage.kaoshiList = JSON.stringify(arr)
					show(arr)
					for (var j = 0; j < lis.length; j++) {
						lis[j].className = ''
						divs[j].style.display = 'none'
					}
					lis[2].className = 'active'
					divs[2].style.display = 'block'
				} else {
					alert('请补全信息')
				}
				addtext.value = ''
			}

			function show(arr) {
				var str = ''
				for (var i = 0; i < arr.length; i++) {
					str +=
						`
					<tr>
						<td>${arr[i].id}</td>
						<td>${arr[i].username}</td>
						<td>
							<button type="button" onclick=del(${arr[i].id})>删除</button>
						</td>
						<td>
							<button type="button"  ${i== 0? 'disabled' :''} onclick=upAnddown(${i},'up')>上移</button>
							<button type="button" ${i == arr.length-1? 'disabled' :''} onclick=upAnddown(${i},'down')>下移</button>
						</td>
					</tr>
					`
				}
				var tbody = document.querySelector('#tbody')
				tbody.innerHTML = str
			}
			show(JSON.parse(localStorage.kaoshiList))

			var serch = document.querySelector('#serch')
			serch.onclick = function() {
				var serchtext = document.querySelector('#serchtext')
				var arr = JSON.parse(localStorage.kaoshiList)
				var myarr = arr.filter(function(ele) {
					return ele.username == serchtext.value
				})
				show(myarr)
			}

			function del(id) {
				console.log(id)
				var arr = JSON.parse(localStorage.kaoshiList)
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].id == id) {
						arr.splice(arr[i] - 1, 1)
						break;
					}
				}
				localStorage.kaoshiList = JSON.stringify(arr)
				show(arr)
			}
			function upAnddown(index,self){
				var arr =JSON.parse(localStorage.kaoshiList)
				var temp = arr[index]
				if(self == 'up'){
					arr[index] = arr[index - 1]
					arr[index - 1] = temp
				}else if(self == 'down'){
					arr[index] = arr[index + 1]
					arr[index + 1] = temp
				}
				localStorage.kaoshiList = JSON.stringify(arr)
				show(arr)
			}
		</script>
	</body>
</html>
